<template>
    <div>
        <div class="container">
            <div class="container MuiPaper-elevation2-346 MuiPaper-rounded-343 ">
                <div class="handle-box">
                    <div class="EnhancedTableToolbar-title-373">
                        <div>组织
                            <el-button class="mr10" type="primary" @click="actionDialogVis=true"><el-icon>
                                <Plus />
                            </el-icon>添加组织</el-button>
                        </div>
                    </div>
                </div>
                <el-table :data="tableData_org" border class="table" :row-class-name="tableRowClassName"
                    @row-click="handleChange">
                    <el-table-column prop="country" label="国家" align="center"></el-table-column>
                    <el-table-column prop="province" label="省份"></el-table-column>
                    <el-table-column prop="city" label="城市" width="200"></el-table-column>
                    <el-table-column prop="org" label="单位名称"></el-table-column>
                    <el-table-column prop="pub" label="公用名称"></el-table-column>
                    <el-table-column label="操作" width="300" align="center">
                        <template #default="scope">
                            <el-button type="primary" key="primary" @click="deleteItem(scope.$index)">删除</el-button>
                            <el-button type="primary" key="primary" @click="infoDialog1(scope.$index)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="container MuiPaper-elevation2-346 MuiPaper-rounded-343 MspTable-root-444">
                <div class="EnhancedTableToolbar-title-373">
                    <span>MSPs</span>
                </div>
                <el-table :data="tableData_msps" border class="table" header-cell-class-name="table-header">
                    <el-table-column prop="msp" label="MSP名称"></el-table-column>
                    <el-table-column prop="path" label="路径"></el-table-column>
                    <el-table-column prop="type" label="节点类型" width="200"></el-table-column>
                    <el-table-column prop="charac" label="角色"></el-table-column>
                    <el-table-column label="操作" width="300" align="center">
                    </el-table-column>
                </el-table>
            </div>
            <div class="container MuiPaper-elevation2-346 MuiPaper-rounded-343 MspTable-root-444">
                <div class="EnhancedTableToolbar-title-373">
                    <span>证书</span>
                </div>
                <el-table :data="tableData_pems" border class="table" header-cell-class-name="table-header">
                    <el-table-column prop="pub" label="公用名称"></el-table-column>
                    <el-table-column label="操作" width="300" align="center">
                        <template #default="scope">
                            <el-button type="primary" key="primary" @click="infoDialog2(scope.$index)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog title="添加组织" v-model="actionDialogVis" width="40%">
            <el-form ref="formRef" :model="form" label-width="120px">
                <el-form-item label="国家" prop="country">
                    <el-input v-model="form.country" />
                </el-form-item>
                <el-form-item label="省份" prop="province">
                    <el-input v-model="form.province" />
                </el-form-item>
                <el-form-item label="城市" prop="city">
                    <el-input v-model="form.city" />
                </el-form-item>
                <el-form-item label="单位名称*" prop="orgName">
                    <el-input v-model="form.orgName" />
                </el-form-item>
                <el-form-item label="公用名称*" prop="pubName">
                    <el-input v-model="form.pubName" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleAdd">添 加</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="infoDialogVisible" width="40%">
            <el-descriptions title="查看组织" direction="horizontal" column="1" border>
                <el-descriptions-item label="国家">{{ form.country }}</el-descriptions-item>
                <el-descriptions-item label="省份">{{ form.province }}</el-descriptions-item>
                <el-descriptions-item label="城市">{{ form.city }}</el-descriptions-item>
                <el-descriptions-item label="单位名称*">{{ form.orgName }}</el-descriptions-item>
                <el-descriptions-item label="公用名称*">{{ form.pubName }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <el-dialog title="证书" v-model="PEMsInfoVis" width="80%">
            <el-form ref="PEMsInfoRef" :model="PEMsInfo" label-with="120px">
                <el-form-item label="密钥" prop="key">
                    <el-input v-model="PEMsInfo.key" type="textarea" disabled :rows="10" />
                </el-form-item>
                <el-form-item label="证书*" prop="ca">
                    <el-scrollbar height="700px">
                        <div style="white-space: pre-line;">{{PEMsInfo.ca}}</div>
                    </el-scrollbar>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import axios from 'axios';
import { ElMessage } from "element-plus";

const tableData_org = ref([]) as any;
const tableData_msps = ref([]) as any;
const tableData_pems = ref([]) as any;

onMounted(() => {
    loadData();
})

// 初始化表格
const actionDialogVis = ref(false);
const form = reactive({
    country: "",
    province: "",
    city: "",
    orgName: "",
    pubName: ""
})

// 添加组织
const handleAdd = () => {
    console.log(form.pubName)
    axios.post('/prefix/api/entity/organizations/' + form.pubName, {
        Country: form.country,
        Province: form.province,
        Locality: form.city,
        Organization: form.orgName,
        CommonName: form.pubName
    }).then(function (value) {
        console.log(value);
        ElMessage.success("添加成功");
        actionDialogVis.value = false;
        loadData();
    }).catch(function (reason) {
        console.log(reason);
        ElMessage.error("添加失败");
    })
}

// 加载表格数据
const data = reactive([]) as any;
const loadData = () => {            // 查询组织
    tableData_org.value = [];
    tableData_msps.value = [];
    tableData_pems.value = [];
    axios.get('prefix/api/entity/organizations', {
    }).then(function (response) {
        data.value = response.data.organizations;
        console.log(data.value)
        for (let i = 0; i < data.value.length; i++) {
            tableData_org.value.push({
                country: data.value[i].Country,
                province: data.value[i].Province,
                city: data.value[i].Locality,
                org: data.value[i].Organization,
                pub: data.value[i].CommonName
            })
        }
        loadMSPs(0);
        loadPEMs(0);
    }).catch(function (error) {
        console.log(error);
    })
}

// 根据一级组织选择确定二级表格数据
const loadMSPs = (index) => {
    const list = data.value;
    if (list.length != 0) {
        for (let i = 0; i < list[index].MSPs.length; i++) {
            tableData_msps.value.push({
                msp: list[index].MSPs[i].Name,
                path: list[index].MSPs[i].Path,
                type: list[index].MSPs[i].Type,
                charac: list[index].MSPs[i].Role
            })
        }
    }
}

// 获取选择的一级组织索引
const tableRowClassName = ({ row, rowIndex }) => {
    row.index = rowIndex;
}

// 同上上
const currentOrg = ref() as any;
const loadPEMs = (index) => {
    const list = data.value;
    // console.log(list)
    if (list.length != 0) {
        for (let i = 0; i < list[index].PEMs.length; i++) {
            tableData_pems.value.push({
                pub: list[index].PEMs[i].Name
            })
        }
    }
    currentOrg.value = list[index];
}

// 清除数据
const clear = () => {
    tableData_msps.value = [];
    tableData_pems.value = [];
}

// 二级表格切换事件
const handleChange = (row) => {
    const index = row.index;
    clear();
    loadMSPs(index);
    loadPEMs(index);
    currentOrg.value = data.value[index];
}

// 删除组织
const deleteItem = (index) => {
    axios.delete('prefix/api/entity/organizations/' + tableData_org.value[index].pub, {
    }).then(function (response) {
        // console.log(response)
        ElMessage.success("删除成功");

        loadData();
    }).catch(function (error) {
        console.log(error);
    })
}

// 查看组织
const infoDialogVisible = ref(false);
const infoDialog1 = (index) => {
    infoDialogVisible.value = true;
    axios.get('prefix/api/entity/organizations/' + tableData_org.value[index].pub, {
    }).then(function (response) {
        form.country = response.data.Country;
        form.province = response.data.Province;
        form.city = response.data.Locality;
        form.orgName = response.data.Organization;
        form.pubName = response.data.CommonName;
    })
}

// 查看证书
const PEMsInfoVis = ref(false);
const PEMsInfo = ref(
    {
        ca: "",
        key: ""
    }) as any
const readPEMs = ref(false)
const infoDialog2 = (index) => {
    readPEMs.value = true;
    axios.get('prefix/api/organizations/' + currentOrg.value.CommonName + '/' + tableData_pems.value[index].pub, {
    }).then(function (response) {
        PEMsInfoVis.value = true;
        console.log(response)
        PEMsInfo.value = {}
        const JSONca = eval("(" + response.data.ca + ")");
        // console.log(JSON.stringify(JSONca, null, 2))
        PEMsInfo.value.ca = JSON.stringify(JSONca, null, 2);
        PEMsInfo.value.key = response.data.key;
    })
}
</script>
  
<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.mr10 {
    margin-right: 10px;
}

.EnhancedTableToolbar-title-373 {
    flex: 0 0 auto;
}

.handle-box {
    margin-bottom: 20px;
}

.MspTable-root-444 {
    margin-top: 24px;
}

.MuiPaper-elevation2-346 {
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded-343 {
    border-radius: 4px;
}
</style>
  